<template>
  <div class="mov">
    <div class="mov-item">
      <div class="item">
        <div class="item-left">
          <div class="tu" @click="tofilmsDetail">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>

        <div class="item-left">
          <div class="tu">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>

        <div class="item-left">
          <div class="tu">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>

        <div class="item-left">
          <div class="tu">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>

        <div class="item-left">
          <div class="tu">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>

        <div class="item-left">
          <div class="tu">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>

        <div class="item-left">
          <div class="tu">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>

        <div class="item-left">
          <div class="tu">
            <img
              src="https://p0.meituan.net/movie/1c5048e47c7894c91118db71fcab81b633979.jpg@160w_220h_1e_1c"
              alt=""
            />
          </div>
          <div class="zi">
            <div class="title">胡歌</div>
            <div class="eg-title">Ge Hu</div>
            <div class="fen">
              <span class="sp-left">7141</span
              ><span class="sp-right">人关注</span>
            </div>
            <div class="film-type">
              代表作：《琅琊榜》 《伪装者》 《你好，之华》
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.mov {
  width: 100%;
  overflow: hidden;
  margin-bottom: 50px;
  .mov-item {
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;

    .item {
      width: 950px;
      height: 460px;
      // background: plum;
      margin: 0 auto;
      margin-bottom: 10px;

      .item-left {
        width: 455px;
        height: 220px;
        // background: powderblue;
        float: left;
        overflow: hidden;
        margin-right: 20px;
        margin-bottom: 30px;

        .tu {
          width: 150px;
          height: 220px;
          // background: blanchedalmond;
          float: left;

          img {
            width: 160px;
            height: 218px;
          }
        }
        .zi {
          width: 305px;
          height: 220px;
          // background: blue;
          float: left;
          padding-left: 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #e5e5e5;

          .title {
            font-size: 26px;
            color: #333;
            margin-top: 25px;
          }
          .eg-title {
            font-size: 14px;
            color: #999;
            margin-top: 3px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-bottom: 1px;
            margin-bottom: -1px;
            box-sizing: border-box;
          }
          .fen {
            color: #ffb400;
            font-size: 26px;
            font-weight: 700;
            margin-top: 20px;
          }
          .film-type {
            margin-top: 10px;
            font-size: 16px;
            color: #333;
            padding-bottom: 1px;
            margin-bottom: -1px;
          }
        }
      }
    }
  }
}
</style>
<script>
export default {
  methods:{
    tofilmsDetail(){
        this.$router.push("cinemas/:id")
    }
  }
}
</script>